<template>
  <Card>
    <p slot="title">订单统计</p>
    <div class="search-con search-con-top">
      <div>
        运营商户：
        <Select v-model="searchData.operator_id" style="width:200px" filterable @on-change="operatorListChange">
          <Option v-for="item in operatorList" :value="item.id" :key="item.id">{{ item.name }}</Option>
        </Select>
        柜机商户：
        <Select v-model="searchData.franchiser_id" style="width:200px" filterable @on-change="franchiserListChange">
          <Option v-for="item in franchiserList" :value="item.id" :key="item.id">{{ item.name }}</Option>
        </Select>
        时间范围：
        <DatePicker :clearable=false @on-change="datePickChange" type="daterange" placement="bottom-end" placeholder="请选择"
          style="width: 200px" :value="timeArr" format="yyyy-MM-dd" confirm></DatePicker>
        <Button @click="search" type="primary" shape="circle" icon="ios-search" style="margin-left: 10px;">搜索</Button>
        <Button @click="reset" type="success" shape="circle" icon="ios-refresh" style="margin-left: 10px;">刷新</Button>
        <Button @click="download" type="info" shape="circle" icon="ios-cloud-download-outline" style="margin-left: 10px;">下载</Button>
      </div>
    </div>
    <br>
    <Table :columns="columns" :data="list" border>
      <template slot="payAmountSlot" slot-scope="{ row, index }">
        <p>{{parseFloat(row.pay_amount/100).toFixed(2)}} </p>
      </template>
      <template slot="profitSlot" slot-scope="{ row, index }">
        <p>{{parseFloat(row.profit/100).toFixed(2)}} </p>
      </template>
      <template slot="avgProfitSlot" slot-scope="{ row, index }">
        <p>{{parseFloat(row.avg_profit/100).toFixed(2)}} </p>
      </template>
      <template slot="refundAmountSlot" slot-scope="{ row, index }">
        <p>{{parseFloat(row.refund_amount/100).toFixed(2)}} </p>
      </template>
      <template slot="addressSlot" slot-scope="{ row, index }">
        <p>{{row.province}}{{row.city}}{{row.district}}{{row.address}}</p>
      </template>
    </Table>
    <br>
    <Page :total="total" show-sizer show-total show-elevator @on-change="changePage" @on-page-size-change="changeSize">
    </Page>
  </Card>
</template>

<script>
import { standardTimeFormat, formatDate } from '@/libs/tools'
export default {
  data() {
    return {
      searchData: {
        page: 1,
        limit: 10
      },
      timeArr: [],
      // 列表
      columns: [
        {
          title: '运营商',
          key: 'operator_name',
          width: 210
        },
        {
          title: '柜机商户',
          key: 'franchiser_name',
        },
        {
          title: '日期',
          key: 'day',
        },
        {
          title: '设备总数量',
          key: 'cupboard_count',
        },
        {
          title: '在线设备数量',
          key: 'online_cupboards',
        },
        {
          title: '订单量(单)',
          key: 'order_count',
        }, {
          title: '平均设备订单(单)',
          key: 'avg_order',
        },
        {
          title: '购买人数',
          key: 'order_user_count',
        },
        {
          title: '平均客单',
          key: 'avg_user_order',
        },
        {
          title: '支付总计(元)',
          key: 'pay_amount',
          slot: 'payAmountSlot',
        },
        {
          title: '营业额(元)',
          key: 'profit',
          slot: 'profitSlot',
        },
        {
          title: '平均设备利润营业额(元)',
          key: 'avg_profit',
          slot: 'avgProfitSlot',
        },
        {
          title: '退款金额(元)',
          key: 'refund_amount',
        },
        {
          title: '地址',
          key: 'province',
          slot: 'addressSlot',
        },
      ],
      // 数据
      list: [],
      total: 0,
      //运营商列表
      operatorList: [],
      //柜机商列表
      franchiserList: [],
      city_id: 0,
      //街道列表
      streetList: [],
      //小区列表
      communityList: [],
    }
  },
  methods: {
    // 查询管理员信息
    getSaleStatisticsList() {
      let params = {
        ...this.searchData,
      };
      this.$axios('/adminstatistics/getOrderSalesList', params).then(res => {
        this.list = res.data;
        this.total = res.total;
      });
    },
    search() {
      this.searchData.page = 1;
      this.getSaleStatisticsList();
    },
    reset() {
      this.searchData = {
        page: 1,
        limit: 10,
      };
      this.getSaleStatisticsList();
    },
    changePage(page) {
      this.searchData.page = page;
      this.getSaleStatisticsList();
    },
    changeSize(size) {
      this.searchData.limit = size;
      this.getSaleStatisticsList();
    },
    //运营商户列表
    getOperatorList() {
      this.$axios('/adminstatistics/getOperatorList', {}).then(res => {
        this.operatorList = res;
      });
    },
    //运营商户选择框change事件
    operatorListChange(value) {
      this.operatorId = value;
      this.$axios('/adminstatistics/getFranchiserListByOperatorId', { operator_id: value }).then(res => {
        this.franchiserList = res;
      });
      this.franchiserListChange(0);
    },
    //街道列表
    franchiserListChange(value) {
      this.$axios('/adminregion/getStreetList', { operator_id: this.operatorId, franchiser_id: value }).then(res => {
        this.streetList = res;
      });
    },
    //街道切换
    streetListChange(value) {
      this.$axios('/adminregion/getCommunityList', { street_id: value }).then(res => {
        this.communityList = res;
      });
    },
    //日期选择
    datePickChange(value) {
      this.searchData.startTime = value[0];
      this.searchData.endTime = value[1];
    },
  },
  created() {
    let date = new Date();
    let endTime = date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
    let startTime = formatDate(new Date(endTime), "yyyy-MM-dd");
    endTime = formatDate(new Date(), "yyyy-MM-dd");
    this.timeArr[0] = startTime
    this.timeArr[1] = endTime
    this.searchData.startTime = startTime;
    this.searchData.endTime = endTime;
    this.getSaleStatisticsList();
    this.getOperatorList();
  }
}
</script>
<style>

</style>
